<script setup lang="ts">
import { ref } from 'vue'
import { useVbenModal, useVbenForm } from '@vben/common-ui'
import { Input, message } from 'ant-design-vue'
import { exportAddOrderData } from '#/api/backend/goodsPurchaseTotalSku'
import dayjs from 'dayjs'

const data = ref<any>({
  year: dayjs().year(),
  season: '',
  category1: '',
  category2: '',
  category3: '',
  goods_no: '',
})

const [Form, formApi] = useVbenForm({
  showDefaultActions: true,
  submitButtonOptions: { text: '导出' },
  resetButtonOptions: { text: '取消' },
  layout: 'vertical',
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  schema: [
    {
      component: 'Input',
      fieldName: 'year',
      label: '年份',
      componentProps: {
        placeholder: '请输入年份',
      },
    },
    {
      component: 'Input',
      fieldName: 'season',
      label: '季节',
      componentProps: {
        placeholder: '请输入季节',
      },
    },
    {
      component: 'Input',
      fieldName: 'category1',
      label: '大类',
      componentProps: {
        placeholder: '请输入大类',
      },
    },
    {
      component: 'Input',
      fieldName: 'category2',
      label: '中类',
      componentProps: {
        placeholder: '请输入中类',
      },
    },
    {
      component: 'Input',
      fieldName: 'category3',
      label: '小类',
      componentProps: {
        placeholder: '请输入小类',
      },
    },
    {
      component: 'Input',
      fieldName: 'goods_no',
      label: '货号',
      componentProps: {
        placeholder: '请输入货号，多个用逗号隔开',
      },
    },
  ],
  wrapperClass: 'grid-cols-2 gap-4',
  handleSubmit: async (values: Record<string, any>) => {
    try {
      await exportAddOrderData(values)
      message.success('导出成功')
      modalApi.close()
    } catch (error) {
      message.error('导出失败')
    }
  },
})

const [Modal, modalApi] = useVbenModal({
  title: '导出补单数据',
  onCancel() {
    modalApi.close()
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      // 重置表单
      formApi.resetForm()
    }
  },
})
</script>

<template>
  <Modal>
    <Form />
  </Modal>
</template>
